import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import '@/pages/Month/index.scss'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from '@/pages/Month/components/billList'

const Year = () => {
  // 时间选择器状态
  const [picker, setPicker] = useState(false)

  // 时间
  const [date, setDate] = useState('')

  // 获取列表数据
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(() => {
    return _.groupBy(billList, item => dayjs(item.date).format('YYYY'))
  }, [billList])

  // 选择当前月数据
  const [monthData, setMonthData] = useState([])

  // 计算 支出 收入 结余
  const monthMoney = useMemo(() => {
    // 支出 收入 结余
    const pay = monthData.filter(el => el.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = monthData.filter(el => el.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      totle: pay + income
    }
  }, [monthData])

  // 确认时间选择
  const dateConfirm = (date) => {
    const formatDate = dayjs(date).format('YYYY')
    setDate(formatDate)
    setMonthData(monthGroup[formatDate] || [])
    setPicker(false)
  }

  // 初始化选择数据
  useEffect(() => {
    const nowDate = dayjs().format('YYYY')
    setDate(nowDate)
    setMonthData(monthGroup[nowDate] || [])
  }, [monthGroup])

  // 列表天-分组数据
  const dayList = useMemo(() => {
    const list = _.groupBy(monthData, item => dayjs(item.date).format('YYYY-MM'))
    const keys = Object.keys(list)
    return {
      list,
      keys
    }
  }, [monthData])
  return (
    <div className="monthlyBi1l">
      <NavBar className="nav" back={null}>
        年度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/*时间切换区域*/}
          <div className="date" onClick={() => setPicker(true)}>
            <span className="text">
              {date}月账单
            </span>
            <span className={classNames('arrow', picker && 'expand')}></span>
          </div>
          {/*统计区域*/}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthMoney.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthMoney.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthMoney.totle.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          <DatePicker
            className='kaDate'
            title='记账日期'
            precision='year'
            onCancel={() => setPicker(false)}
            onConfirm={dateConfirm}
            onClose={() => setPicker(false)}
            visible={picker}
            max={new Date()}
          />
        </div>
        {
          dayList.keys.map(key => {
            return <DailyBill key={key} day={key} list={dayList.list[key]} />
          })
        }
      </div>
    </div>
  )
}

export default Year